<template>
  <el-container>
    <div class="smallmain">
      <div>
        <el-card class="box-cardone">
          <div class="demo-image">
            <el-carousel :interval="2000" direction="vertical" height="200px">
              <el-carousel-item v-for="item in imagesbox" :key="item.id">
                <img :src="item.idView" class="image" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-card>
      </div>
      <div class="ranking">
        <el-card class="box-cardleft">
          <!-- <span>大神风采</span> -->
          <p style=" text-justify: newspaper;">联&nbsp;系&nbsp;人：王富贵</p>
          <p>电&nbsp;&nbsp;&nbsp;&nbsp;话：11001010086</p>
          <p>公司&nbsp;地址：王富贵村</p>
          <p>Q&nbsp;&nbsp;Q&nbsp;&nbsp;群：1008645214</p>
        </el-card>
      </div>
    </div>
  </el-container>
</template>

<script>
export default {
  name: "Banner",
  data() {
    return {
      imagesbox: [
        { id: 0, idView: require("@/assets/1.jpg") },
        { id: 1, idView: require("@/assets/2.jpg") },
        { id: 2, idView: require("@/assets/3.jpg") },
        { id: 3, idView: require("@/assets/4.jpg") },
        { id: 4, idView: require("@/assets/5.jpg") },
        { id: 5, idView: require("@/assets/6.jpg") },
      ],
      formInline: {
        user: "",
        region: "",
      },
    };
  },
  methods: {
    setSize: function () {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = (400 / 1920) * this.screenWidth;
    },

    onSubmit() {
      console.log("submit!");
    },
  },
  mounted() {
    // 首次加载时,需要调用一次
    this.screenWidth = window.innerWidth;
    this.setSize();
    // 窗口大小发生改变时,调用一次
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
      this.setSize();
    };
  },
};
</script>

<style scoped>
/* 周排行卡片 */
.box-cardleft {
  width: 100%;
  height: 250px;
}
.smallmain {
  margin-top: 65px;
  margin-left: 250px;
  width: 800px;
}

/* 搜索 */
.demo-form-inline {
  float: right;
}
/* 轮播图 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.image {
  width: 100%;
  height: 100%;
}
</style>